<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Canvas时钟</title>
		<style>
			canvas{
				border: 1px solid #000;
			}
		</style>
	</head>
	
	<body>
		<canvas id="myCanvas" width="500" height="500"></canvas>
		<script type="text/javascript">
			var myCanvas = document.getElementById('myCanvas');
			var ctx = myCanvas.getContext('2d');
			//设置画笔颜色 粗细  阴影
			ctx.strokeStyle = '#00ffff';
			ctx.lineWidth = 17;
			ctx.shadowBlur = 15;
			ctx.shadowColor = '#00ffff';
			
			function renderTime(){
				var now = new Date();
				var today = now.toDateString();
				var time = now.toLocaleTimeString();
				var hrs = now.getHours();
				var min = now.getMinutes();
				var sec = now.getSeconds();
				var mil = now.getMilliseconds();
				//变化过度效果
				var tranm = min + (sec / 60);
				var trans = sec + (mil /1000);
				
				//背景
				//createLinearGradient()方法创建放射状/圆形渐变对象
				//开发放射的圆心坐标,半径，结束放射的圆形坐标半径
				gradient = ctx.createRadialGradient(250,250,5,250,250,300);
				//设置渐变背景的颜色范围
				gradient.addColorStop(0,'#03303a');
				gradient.addColorStop(1,"black");
				//将设置好的渐变颜色填充到区域内
				ctx.fillStyle = gradient;
				ctx.fillRect(0,0,500,500);
				
				//小时
				ctx.beginPath();
				//每一个格代表  360/12 = 30;
				ctx.arc(250,250,200,degToRad(270),degToRad((hrs * 30) - 90));
				//x 坐标 ，y坐标，r圆的半径，开始角度，结束角度，顺逆时钟
				ctx.stroke();
				
				//分钟
				ctx.beginPath();
				//每一个格代表  360/59 = 30;
				ctx.arc(250,250,170,degToRad(270),degToRad((tranm * 6) - 90));
				//x 坐标 ，y坐标，r圆的半径，开始角度，结束角度，顺逆时钟
				ctx.stroke();
				
				//秒
				ctx.beginPath();
				//每一个格代表  360/12 = 30;
				ctx.arc(250,250,140,degToRad(270),degToRad((trans * 6) - 90));
				//x 坐标 ，y坐标，r圆的半径，开始角度，结束角度，顺逆时钟
				ctx.stroke();
				
				//date
				ctx.font = "25px Helvetica";
				ctx.fillStyle = "rgba(0,255,255,1)";
				ctx.fillText(today,175,250);
				
				//Time
				ctx.font = "25px Helvetica Bold";
				ctx.fillStyle = 'rgba(0,255,255,1)';
				var h = ('0' + hrs).slice(-2);
				var m = ('0' + min).slice(-2);
				var s = ('0' + sec).slice(-2);
				ctx.fillText(h + ":" + m + ":" + s + ":" + mil,175,280);
			}
			
			setInterval(renderTime,40);
			
			//角度转弧度，弧度 = 角度 * Math.PI / 180
			function degToRad(deg){
				return deg * Math.PI / 180;
			}
		</script>
	</body>
</html>
